<template>
  <div>
    <van-sticky>
      <div class="box">
        <van-icon @click="back" name="arrow-left" />
        <van-tabs @click="onClick" type="card">
          <van-tab title="已发布" name="/homework/"></van-tab>
          <van-tab title="作业库" name="/homework/task"></van-tab>
        </van-tabs>
        <van-icon>
          <van-popover
            placement="bottom-end"
            v-model="showPopover"
            trigger="click"
            :actions="actions"
            @select="onSelect"
          >
            <template #reference>
              <van-button style="border: none">
                <van-icon name="plus"></van-icon>
              </van-button>
            </template>
          </van-popover>
        </van-icon>
      </div>
    </van-sticky>
    <div style="height: 100vh; backgroundcolor: #eee">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: "",
      showPopover: false,
      actions: [
        { text: "新建作业", icon: "add-o" },
        { text: "教学资源库", icon: "home-o" },
        { text: "建文件夹", icon: "more-o" },
      ],
      // 测试
    };
  },

  methods: {
    onSelect(action) {
      console.log(action.text);
    },
    // 测试
    onClick(name) {
      //  console.log(name);
      this.$router.push(name);
    },

    back() {
        this.$router.go(-1);
      console.log(111111);
    },
    create() {
      //   this.$router.replace("/create");
    },
  },
};
</script>

<style scoped>
.van-field {
  width: 10px;
  position: relative;
  right: -18%;
}
.box {
  display: flex;
  width: 100vw;
  border-bottom: 1px solid #eee;
  height: 46px;
  align-items: center;
  justify-content: center;
  background-color: white;
  /* position: fixed;
  top: 0; */
}

.van-icon:first-child {
  position: relative;
  left: -15%;
}
.van-icon {
  position: relative;
  right: -18%;
}
.van-tabs {
  width: 50%;
  height: 20px;
}
/deep/.van-tabs__nav--card {
  border: none;
  margin: 0;
}
/deep/.van-tab {
  height: 20px;
  color: black;
  background-color: white;

  border: 1px solid #1989fa;
}
/deep/.van-tab:first-child {
  border-radius: 20px 0 0 20px;
}
/deep/.van-tab {
  border-radius: 0 20px 20px 0;
}

/deep/.van-tabs__nav--card .van-tab.van-tab--active {
  color: white;
  background-color: #1989fa;
}
</style>